<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple Slide Panel</title>
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(".btn-slide").hover(function () {
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            }, function () {
                return false;
            });

            $("#panel").hover(function () {
                return false;
            }, function () {
                $("#panel").slideToggle("slow");
                $(".btn-slide").toggleClass("active");
                return false;
            });


        });
    </script>
    <style type="text/css">
        body { background-color:#504D4F; margin: 0 auto; padding: 0; font: 75%/120% Arial, Helvetica, sans-serif; }

        a:focus { outline: none; }

        #panel { background: #754c24; width:20px; height: 200px; display: none; background-image:url(imgs/menuside.png); background-repeat:no-repeat; }

        .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(imgs/btn-slide.gif) no-repeat center top; }

        .btn-slide { background: url(imgs/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; }

        .active { background-position: right 12px; }

        #menuside { position:absolute; z-index:1; right:10px; }

        #panel { wordbreak:true; }

    </style>
</head>
<body>
<div id="menuside">
    <div id="panel">
        <!-- you can put content here -->
        <a>english</a>
        <a>Chinease</a>
        <a>Gememan</a>
    </div>
    <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
</div>


<div style="width:800px; height:300px; background-color:Gray; margin:0px auto;">
    <p>&nbsp;</p>
</div>

</body>
</html>
